<template>
  <view class="kd-home-page">
    <customNavBar :pageTitle="'附近包裹'" />
    <view class="content">
      <view class="tab-option">
        <uni-segmented-control
          :current="tabActive"
          :values="items"
          @clickItem="handleChangeTab"
          styleType="text"
          activeColor="#4CC1EE"
        ></uni-segmented-control>
      </view>

      <view v-show="tabActive === 0">
        <map
          name="map"
          id="MapTest"
          :longitude="longitude"
          :latitude="latitude"
          scale="14"
          show-location
          :markers="markers"
          :style="{ height: mapHeight + 'px' }"
          @markertap="handleClickMarker"
        ></map>
      </view>

      <view v-show="tabActive === 1">
        <scroll-view
          scroll-y
          class="scroll-content"
          :style="{ height: mapHeight + 'px' }"
          @scrolltolower="handleLoadMore"
          lower-threshold="70"
        >
          <view v-if="isNullData" class="no-data">
            <van-empty description="暂无数据" />
          </view>

          <view
            class="order-item-wrap mb-20"
            v-for="(item, index) in list"
            :key="index"
            @click="handleToOrderDetail(item)"
          >
            <view class="order-top-info">
              <view class="time">接单时间：{{ item.rob_time }}</view>
              <view class="status">
                <van-button type="info" size="mini"
                  >{{ goodsStatusMapText[item.goods_status] }}
                </van-button>
              </view>
            </view>

            <view class="item-content">
              <view class="left">
                <view class="send-wrap mb-20">
                  <view class="icon">寄</view>
                  <view class="send-info">
                    <view class="top-name">
                      <view class="name">{{ item.a1name }}</view>
                    </view>
                    <view class="bottom-address"
                      >{{
                        item.a1areaaddress +
                        item.a1name_address +
                        item.a1doornumber
                      }}
                    </view>
                  </view>
                </view>

                <view class="send-wrap receiving-wrap">
                  <view class="icon">收</view>
                  <view class="send-info">
                    <view class="top-name">
                      <view class="name">{{ item.a2name }}</view>
                    </view>
                    <view class="bottom-address"
                      >{{
                        item.a2areaaddress +
                        item.a2name_address +
                        item.a2doornumber
                      }}
                    </view>
                  </view>
                </view>
              </view>

              <view class="right">
                <uni-icons type="right" size="18" color="#BFBFC1"></uni-icons>
              </view>
            </view>
          </view>

          <view class="loading" v-if="loading">
            <van-loading color="#0091FF" size="34px" />
          </view>
        </scroll-view>
      </view>

      <view v-show="tabActive === 2">
        <scroll-view
          scroll-y
          class="scroll-content"
          :style="{ height: mapHeight + 'px' }"
          @scrolltolower="handleLoadMore"
          lower-threshold="70"
        >
          <view v-if="isNullData" class="no-data">
            <van-empty description="暂无数据" />
          </view>

          <view
            class="order-item-wrap mb-20"
            v-for="(item, index) in list"
            :key="index"
            @click="handleToOrderDetail(item)"
          >
            <view class="order-top-info">
              <view class="time">取件时间：{{ item.picked_time }}</view>
              <view class="status">
                <van-button type="info" size="mini"
                  >{{ goodsStatusMapText[item.goods_status] }}
                </van-button>
              </view>
            </view>

            <view class="item-content">
              <view class="left">
                <view class="send-wrap mb-20">
                  <view class="icon">寄</view>
                  <view class="send-info">
                    <view class="top-name">
                      <view class="name">{{ item.a1name }}</view>
                    </view>
                    <view class="bottom-address"
                      >{{
                        item.a1areaaddress +
                        item.a1name_address +
                        item.a1doornumber
                      }}
                    </view>
                  </view>
                </view>

                <view class="send-wrap receiving-wrap">
                  <view class="icon">收</view>
                  <view class="send-info">
                    <view class="top-name">
                      <view class="name">{{ item.a2name }}</view>
                    </view>
                    <view class="bottom-address"
                      >{{
                        item.a2areaaddress +
                        item.a2name_address +
                        item.a2doornumber
                      }}
                    </view>
                  </view>
                </view>
              </view>

              <view class="right">
                <uni-icons type="right" size="18" color="#BFBFC1"></uni-icons>
              </view>
            </view>
          </view>

          <view class="loading" v-if="loading">
            <van-loading color="#0091FF" size="34px" />
          </view>
        </scroll-view>
      </view>
    </view>

    <KdTabBar ref="KdTabBar" />
    <van-dialog id="van-dialog" />
    <van-toast id="van-toast" />
  </view>
</template>

<script>
const app = getApp();
import Toast from "wxcomponents/vant/toast/toast";
import Dialog from "wxcomponents/vant/dialog/dialog";
import DeliveryManInfo from "@/components/DeliveryManInfo/index.vue";
import UserInfoInList from "@/components/UserInfoInList/index.vue";
import KdTabBar from "@/components/KdTabBar/index.vue";
import customNavBar from "@/components/customNavBar/index.vue";

export default {
  components: {
    DeliveryManInfo,
    UserInfoInList,
    KdTabBar,
    customNavBar,
  },
  data() {
    return {
      markers: [],
      markersMap: [
        {
          id: 1,
          latitude: "28.22338",
          longitude: "112.98492",
          title: "快递员1号",
          iconPath: "/static/image/kd-icon2.png",
          width: 30,
          height: 30,
        },
        {
          id: 2,
          latitude: "28.20000",
          longitude: "112.97868",
          title: "快递员2号",
          iconPath: "/static/image/kd-icon2.png",
          width: 30,
          height: 30,
        },
        {
          id: 3,
          latitude: "28.20250",
          longitude: "112.97556",
          title: "快递员3号",
          iconPath: "/static/image/kd-icon2.png",
          width: 30,
          height: 30,
        },
        {
          id: 4,
          latitude: "28.20470",
          longitude: "112.97547",
          title: "快递员4号",
          iconPath: "/static/image/kd-icon2.png",
          width: 30,
          height: 30,
        },
        {
          id: 5,
          latitude: "28.20163",
          longitude: "112.97851",
          title: "快递员5号",
          iconPath: "/static/image/kd-icon2.png",
          width: 30,
          height: 30,
        },
        {
          id: 6,
          latitude: "28.20557",
          longitude: "112.98954",
          title: "快递员6号",
          iconPath: "/static/image/kd-icon2.png",
          width: 30,
          height: 30,
        },
        {
          id: 7,
          latitude: "28.20031",
          longitude: "112.98277",
          title: "快递员7号",
          iconPath: "/static/image/kd-icon2.png",
          width: 30,
          height: 30,
        },
        {
          id: 8,
          latitude: "28.20837",
          longitude: "112.97701",
          title: "快递员8号",
          iconPath: "/static/image/kd-icon2.png",
          width: 30,
          height: 30,
        },
        {
          id: 9,
          latitude: "28.24085",
          longitude: "112.94382",
          title: "快递员9号",
          iconPath: "/static/image/kd-icon2.png",
          width: 30,
          height: 30,
        },
        {
          id: 10,
          latitude: "28.20895",
          longitude: "112.94202",
          title: "快递员10号",
          iconPath: "/static/image/kd-icon2.png",
          width: 30,
          height: 30,
        },

        {
          id: 11,
          latitude: "28.205198",
          longitude: "112.971276",
          title: "快递员11号",
          iconPath: "/static/image/kd-icon2.png",
          width: 30,
          height: 30,
        },

        {
          id: 12,
          latitude: "28.19900",
          longitude: "112.97722",
          title: "快递员12号",
          iconPath: "/static/image/kd-icon2.png",
          width: 30,
          height: 30,
        },

        {
          id: 13,
          latitude: "28.198028",
          longitude: "112.969934",
          title: "快递员13号",
          iconPath: "/static/image/kd-icon2.png",
          width: 30,
          height: 30,
        },
        {
          id: 14,
          latitude: "28.191858",
          longitude: "112.970619",
          title: "快递员14号",
          iconPath: "/static/image/kd-icon2.png",
          width: 30,
          height: 30,
        },
      ],
      latitude: "",
      longitude: "",
      showModal: false,
      tabActive: 0,
      mapHeight: 0,
      pageIndex: 1,
      pageSize: 10,
      loading: false,
      hasMoreData: false,
      isNullData: false,
      list: [],
      goodsStatusMapText: {
        1: "待取件",
        2: "配送中",
        3: "已完成",
      },
      isIphoneX: false,
      items: ["待抢", "待取件", "待配送"],
    };
  },
  onLoad() {
    this.isIphoneX = app.globalData.isIphoneX;
    this.handleGetGps();
  },
  onShow() {
    this.handleGetWaitPickedUp();
  },
  methods: {
    handleGetGps() {
      const that = this;
      uni.getLocation({
        success(res) {
          const { latitude, longitude } = res;

          that.latitude = latitude;
          that.longitude = longitude;
          app.globalData.latitude = latitude;
          app.globalData.longitude = longitude;
          that.handleGetWaitPickedUp();
        },
        fail(res) {
          console.log(res);
        },
      });
    },
    handleClickMarker(data) {
      const that = this;
      console.log(data);
      if (this.showModal) {
        return;
      }
      this.showModal = true;
      const { detail } = data;
      const { markerId } = detail;

      Dialog.confirm({
        message: "确认接单吗？",
        zIndex: 9999,
      })
        .then(() => {
          this.showModal = false;

          Toast.loading({
            message: "加载中",
            mask: true,
            duration: 0,
            zIndex: 9999999,
            forbidClick: true,
          });
          app
            .request(
              {
                oid: markerId,
              },
              "/api/logistics/order/rob"
            )
            .then((res) => {
              console.log(res);
              const { code, data, msg } = res;

              if (code === 1) {
                that.handleGetWaitPickedUp();
                Toast("接单成功");
              } else {
                Toast(msg);
              }
            });
        })
        .catch(() => {
          // on cancel
          console.log(333);
          this.showModal = false;
        });
    },
    handleChangeTab(res) {
      const { currentIndex } = res;

      this.tabActive = currentIndex;

      if (currentIndex !== 0) {
        this.handleInitPageInfo();
        this.handleGetList();
      }
    },
    handleGetWaitPickedUp() {
      const { latitude, longitude } = this;

      if (latitude && longitude) {
        app
          .request(
            {
              lat: latitude,
              lnt: longitude,
            },
            "/api/logistics/terminal/search_order"
          )
          .then((res) => {
            const { code, data, msg } = res;

            if (code === 1) {
              this.markers = data.map((item) => {
                let dotArr = item.a1location.split(",");

                return {
                  ...item,
                  id: item.oid,
                  latitude: dotArr[0],
                  longitude: dotArr[1],
                  iconPath: "/static/image/kd-icon2.png",
                  width: 30,
                  height: 30,
                };
              });

              // this.markers = data.concat(this.markersMap)
            } else {
              Toast(msg);
            }
          });
      }
    },

    handleLoadMore() {
      const { loading, pageIndex, hasMoreData } = this;

      if (loading === false && hasMoreData) {
        this.loading = true;
        this.isNullData = false;
        this.pageIndex = pageIndex + 1;
        this.handleGetList();
      }
    },

    handleInitPageInfo() {
      this.pageIndex = 1;
      this.hasMoreData = false;
      this.isNullData = false;
      this.list = [];
    },
    handleGetList() {
      const { tabActive, pageIndex, pageSize } = this;

      const activeTabMapStatus = {
        0: 1,
        1: 1,
        2: 2,
      };

      this.loading = true;
      app
        .request(
          {
            goods_status: activeTabMapStatus[tabActive],
            page: pageIndex,
            limit: pageSize,
          },
          "/api/logistics/order/express_list"
        )
        .then((res) => {
          const { code, data, msg } = res;

          if (code === 1) {
            let getList = data.data || [];
            let list = this.list;

            const newList = list.concat(getList);
            let hasMoreData = true;
            let isNullData = false;

            if (getList.length < pageSize || !getList.length) {
              hasMoreData = false;
            }

            if (pageIndex === 1 && !getList.length) {
              isNullData = true;
            }

            this.hasMoreData = hasMoreData;
            this.isNullData = isNullData;
            this.list = newList;
          } else {
            Toast(msg);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleToOrderDetail(item) {
      const { oid } = item;
      const that = this;

      uni.navigateTo({
        url: "/pages/kdOrder/detail?oid=" + oid,
        events: {
          refreshList: function () {
            that.handleInitPageInfo();
            that.handleGetList();
          },
        },
      });
    },
  },
  mounted() {
    const that = this;
    const query = uni.createSelectorQuery().in(this.$refs.KdTabBar);
    query
      .select("#kdTabBar")
      .boundingClientRect((data) => {
        console.log(data);
        const { height } = data;
        const windowInfo = uni.getWindowInfo();
        const { windowHeight } = windowInfo;

        that.mapHeight = windowHeight - height - 36;
      })
      .exec();
  },
};
</script>

<style lang="less">
.bottom-area {
  padding-bottom: 130rpx;
}

.kd-home-page {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 100rpx;
  box-sizing: border-box;

  .content {
    width: 100%;
    height: 100%;

    .order-list-wrap {
      background-color: #f2f2f2;

      .order-wrap {
        margin-bottom: 12rpx;
        background-color: #fff;

        .user-wrap {
          width: 100%;
          padding-right: 20rpx;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .status-wrap {
            font-size: 26rpx;
            color: #ff9600;
          }
        }
      }
    }

    .scroll-content {
      padding-top: 20rpx;
      box-sizing: border-box;
      background-color: #f9f9f9;

      .mb-20 {
        margin-bottom: 20rpx;
      }
      .order-item-wrap {
        position: relative;
        width: 100%;
        min-height: 300rpx;
        background-color: #fff;
        .order-top-info {
          width: 100%;
          height: 84rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 22rpx;
          box-sizing: border-box;
          border-bottom: 1rpx solid #f0f1f6;
          margin-bottom: 22rpx;
          .time {
            color: #999;
            font-size: 26rpx;
          }
          .status {
          }
        }
        .item-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 22rpx;
          box-sizing: border-box;
        }

        .order-status {
          position: absolute;
          right: 30rpx;
          top: 20rpx;
          font-size: 24rpx;
          color: #f0ad4e;
          font-weight: bold;
        }
      }
      .left {
        .mb-20 {
          margin-bottom: 20rpx;
        }
        .send-wrap {
          display: flex;
          align-items: center;
          .icon {
            width: 50rpx;
            height: 50rpx;
            color: #fff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20rpx;
            background-color: #f0ad4e;
            font-size: 24rpx;
          }

          .send-info {
            .top-name {
              display: flex;
              align-items: center;
              margin-bottom: 8rpx;
              .name {
                font-size: 28rpx;
                margin-right: 22rpx;
              }
            }
            .bottom-address {
              max-width: 568rpx;
              color: #999999;
              font-size: 24rpx;
            }
          }
        }

        .receiving-wrap {
          .icon {
            width: 50rpx;
            height: 50rpx;
            color: #fff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20rpx;
            background-color: #157fb9;
            font-size: 24rpx;
          }
        }
      }
    }

    .loading {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  #MapTest {
    width: 100%;
  }
}

.mb-20 {
  margin-bottom: 20rpx;
}
</style>
